<template>
  <div class="addperson">
    <div class="addform">
      <form @submit.prevent="addVuex()">
        <p>
          <input type="text" placeholder="请输入注册姓名" required v-model.lazy.trim="objF.uname">
        </p>
        <aside>
          <input type="radio" value="0" name="gender" v-model="objF.gender"><span>女</span>
          <input type="radio" value="1" name="gender" v-model="objF.gender"><span>男</span>
        </aside>
        <p>
          <input type="number" min="18" max="70" placeholder="请输入年龄" required v-model.lazy.trim="objF.age">
        </p>
        <p>
          <!-- 将v-model所获取到的value值转换成数字类型数据 -->
          <select required v-model.number="objF.port">
            <option value="" disabled>--请选择职务--</option>
            <option value="1">老板</option>
            <option value="2">总经理</option>
            <option value="3">部门主管</option>
            <option value="4">组长</option>
            <option value="5">员工</option>
          </select>
        </p>
        <p>
          <input type="number" min="2500" placeholder="请输入薪资" required v-model.lazy.trim="objF.salary">
        </p>
        <p>
          <input type="date" placeholder="请选择入职日期" v-model="objF.ctime" required>
        </p>
        <article>
          <input type="submit" value="添加数据">
        </article>
      </form>
    </div>
  </div>
</template>

<script>
// map方法：是vue3对于vuex的快捷应用方式
import{mapMutations} from 'vuex';

export default {
    name:'AddpersonCom',
    data(){
      return{
        objF:{
          uname:'',
          gender:0,
          age:18,
          port:'',
          salary:2500,
          ctime:'2025-01-02'
        }
      }
    },
    methods:{
      // ... 扩展运算符
      // 利用扩展运算符，将mutations对象中的addlist属性提取出来使用
      ...mapMutations(['addlist']),

      // 创建表单提交事件的函数
      addVuex(){
        // 验证选择的入职时间不得超过当天时间
        let nowtime = new Date().getTime(); //当前系统时间戳
        let Ctime = new Date(this.objF.ctime).getTime(); //日期选择器时间戳
        if(Ctime>nowtime){
          alert('录入的时间不得超过当天时间')
          return;
        }

        // 将数据objF整个提交给vuex内部的函数处理
        this.addlist(this.objF)
        // 添加完成后，重置表单
        // 传递数据后，返回查询页
        // this.$router.push('/home/list')
      }
    }
}
</script>

<style scoped>
.addperson{
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}
.addperson .addform{
  width: 60%;
  overflow: hidden;
  box-shadow: 0px 0px 5px;
  border-radius: 8px;
  position: absolute;
  margin: 25px auto;
  margin-left: 20%;
  margin-top: 10%;
}
.addperson .addform form{
  padding: 10px;
}
.addperson .addform p,
.addperson .addform article{
  width: 100%;
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: 25px;
}
.addperson .addform article input{
  width: 80%;
  height: 60px;
  margin-bottom: 25px;
}
.addperson .addform aside{
  width: 100%;
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
}
.addperson .addform aside span{
  margin-left: 6px;
  margin-right: 30px;
}
.addperson .addform p input{
  width: 80%;
  height: 70%;
}
.addperson .addform p select{
  width: 80%;
  border-radius: 6px;
}
</style>